<template>
    <div class="content-box">
                        <div class="teb">
                            <ul>
                                <ContentTeb v-for="item in content_Tab" :key="item.id" :tebindex="tebcount" :teb="item"></ContentTeb>
                            </ul>
                        </div>
                        <div class="contents">
                            <keep-alive >
                              <router-view></router-view>
                            </keep-alive>
                        </div>
    </div>

</template>
<script>
    import ContentTeb from "./Content_Teb.vue"
 
    export default {
    name: 'ContentBox',
    data() {
      return {
        content_Tab:this.$store.state.content_Tab
      };
    },
    computed:{
      tebcount(){
        return this.$store.state.content_Tab.length;
      }
    },
    components: {
        ContentTeb
    }
  };
</script>
<style >
 .content-box{
            padding-bottom: 30px;
            -webkit-transition: left .3s ease-in-out;
            transition: left .3s ease-in-out;
            background: #f0f0f0;
            position:absolute;
            left: 188px;
            right:0;

            
           
            
        }
 .teb{
            position: relative;
            height: 30px;
            overflow: hidden;
            background: #fff;
            padding-right: 120px;
            -webkit-box-shadow: 0 5px 10px #ddd;
            box-shadow: 0 5px 8px #ddd;
        }
      
</style>